<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <title>积分抽奖</title>
		<link rel="stylesheet" href="css/draw.css">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/turntable.js"></script>
		<!-- <script src="js/alertPopShow.js"></script> -->
		<style>
			.lottery {
				position: relative;
			}

			.lottery img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				cursor: pointer;
			}

			#start{
				width: 99.25px;
				height: 113.25px;
			}
		</style>
		<!--[if lte IE 8]>
			<style>
				.lottery img{
					display: none;
				}   
			</style>
		<![endif]-->
	</head>
	<body style="background: #DF2B2A;background-size: 100%;">
		<div class="draw-title">限时抽取万元大奖</div>
		<div class="draw-integral">20积分可抽取一次，现有 <span>34</span> 积分</div>
		<div class="lottery draw-turntable">
			<canvas id="myCanvas" width="320" height="320">
				当前浏览器版本过低，请使用其他浏览器尝试
			</canvas>
			<img src="./img/start.png" id="start">
		</div>
		<div class="draw-operation">
			<div class="onrules">活动规则</div>
			<div class="onreward">我的奖品</div>
		</div>
		<!-- 活动规则 -->
		<div class="mask" id="mask_rules" style="display: none">
			<div class="rules">
				<div>活动规则</div>
				<div>
					<p>1.客户每次可消耗20积分进行抽奖；</p>
						<p>2.话费3个工作日内到账；</p>
				</div>
			</div>
			<button class="close" id="rulesClose">
				<img src="img/close.png"/>
			</button>
		</div>
		<!-- 未中奖 -->
		<div class="mask" id="mask_no" style="display: none">
			<img src="img/draw-no.png" class="draw-bgc"/>
			<div class="draw">
				<p>谢谢参与</p>
				<button>再来一次</button>
			</div>
			<button class="close" id="noClose">
				<img src="img/close.png"/>
			</button>
		</div>
		<!-- 中奖 -->
		<div class="mask" id="mask_yes" style="display: none">
			<img src="img/draw-yes.png" class="draw-bgc"/>
			<div class="draw">
				<p id="reward_name"></p>
				<div class="draw-prize">
					<!-- <img src="img/eggs.png"/> -->
				</div>
				<button>点击领取</button>
			</div>
			<button class="close" id="yesClose">
				<img src="img/close.png"/>
			</button>
		</div>
		<script>
			// 活动规则弹框
			$('.onrules').click(function(){
				$('#mask_rules').css('display','block')
			})
			$('#rulesClose').click(function(){
				$('#mask_rules').css('display','none')
			})
			$('.onreward').click(function(){
				window.location="prize.html"
			})
		</script>
		<script>
			var wheelSurf
			// 初始化装盘数据 正常情况下应该由后台返回
			var initData = {
				"success": true,
				"list": [{
						"id": 100,
						"name": "10元话费",
						"image": "./img/1.png",
						"rank":1,
						"percent":3
					},
					{
						"id": 101,
						"name": "10个鸡蛋",
						"image": "./img/2.png",
						"rank":2,
						"percent":5
					},
					{
						"id": 102,
						"name": "西芾水上乐园门票",
						"image": "./img/3.png",
						"rank":3,
						"percent":2
					},
					{
						"id": 103,
						"name": "高档五金工具箱",
						"image": "./img/1.png",
						"rank":4,
						"percent":49
					},
					{
						"id": 104,
						"name": "品牌榨汁机",
						"image": "./img/1.png",
						"rank":5,
						"percent":30
					},
					{
						"id": 105,
						"name": "TCL落地电风扇",
						"image": "./img/1.png",
						"rank":6,
						"percent":1
					},
					{
						"id": 106,
						"name": "南极人夏凉被",
						"image": "./img/1.png",
						"rank":7,
						"percent":10
					},
					{
						"id": 107,
						"name": "高档品牌凉席",
						"image": "./img/1.png",
						"rank":8,
						"percent":11
					},
					{
						"id": 108,
						"name": "华为P30手机",
						"image": "./img/1.png",
						"rank":9,
						"percent":12
					},
					{
						"id": 109,
						"name": "谢谢参与",
						"image": "./img/1.png",
						"rank":10,
						"percent":13
					}
				]
			}

			// 计算分配获奖概率(前提所有奖品概率相加100%)
			function getGift(){
				var percent = Math.random()*100
				var totalPercent = 0
				for(var i = 0 ,l = initData.list.length;i<l;i++){
					totalPercent += initData.list[i].percent
					if(percent<=totalPercent){
						var a=Math.ceil(Math.random()*3)
						return initData.list[a]
					}
				}           
			}

			var list = {}
			
			var angel = 360 / initData.list.length
			// 格式化成插件需要的奖品列表格式
			for (var i = 0, l = initData.list.length; i < l; i++) {
				list[initData.list[i].rank] = {
					id:initData.list[i].id,
					name: initData.list[i].name,
					image: initData.list[i].image
				}
			}
			// 查看奖品列表格式
			
			// 定义转盘奖品
			wheelSurf = $('#myCanvas').WheelSurf({
				list: list, // 奖品 列表，(必填)
				outerCircle1: {
					color: '#5F0F9A' // 外圈紫圈
				},
				outerCircle2: {
					color: '#ffffff' // 外圈白圈
				},
				outerCircle3: {
					color: '#621392' // 外圈紫粗圈
				},
				outerCircle4: {
					color: 'rgba(0,0,0,0.2)' // 外圈紫粗圈
				},
				innerCircle: {
					color: '#f4ad26' // 里圈颜色(可选)
				},
				dots: ['#fff'], // 装饰点颜色(可选)
				disk: ['#582882', '#8140C6','#582882', '#8140C6','#582882', '#8140C6','#582882', '#8140C6','#582882', '#8140C6'], //中心奖盘的颜色，默认7彩(可选)
				title: {
					color: '#fff',
					font: '10px Arial',
					font1: '5px Arial',
					whiteSpace:'pre-wrap'
				} // 奖品标题样式(可选)
			})

			// 初始化转盘
			wheelSurf.init()
			// 抽奖
			var throttle = true;
			$("#start").on('click', function () {

				var winData = getGift() // 正常情况下获奖信息应该由后台返回

				if(!throttle){
					return false;
				}
				throttle = false;
				var count = 0
				// 计算奖品角度

				for (const key in list) {
					if (list.hasOwnProperty(key)) {                    
						if (winData.id == list[key].id) {
							break;
						}
						count++    
					}
				}
				if(winData.name=='谢谢参与'){
					wheelSurf.lottery((count * angel + angel / 2), function () {
							$('#mask_no').css('display','block')
							throttle = true;
					})
				}else{
					// 转盘抽奖，
					wheelSurf.lottery((count * angel + angel / 2), function () {
						$('#reward_name').html(`恭喜您中了${winData.name}`)
						var html=`<img src="${winData.image}"/>`
						$('.draw-prize').html(html)
						$('#mask_yes').css('display','block')
						throttle = true;
					})
				}
			})
			$('#yesClose').click(function(){
				$('#mask_yes').css('display','none')
			})
			$('#noClose').click(function(){
				$('#mask_no').css('display','none')
			})
		</script>
	</body>
</html>
